<template>
  <div class="playerContainer">
    <div class="header box box-jc box-ac">
      <div @click="$router.go(-1)" class="icon icon-back"></div>
      <div class="box-f1 tx-c ell title">{{detail.title}}</div>
      <div @click="collection()" :class="{ act: hasCollection }" class="icon icon-collection"></div>
    </div>
    <iframe v-if="detail.oldPlayer" class="box" :src="detail.oldPlayer"></iframe>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'movieDetail',
  data () {
    return {
      detail: {},
      collectionList: []
    }
  },
  computed: {
    ...mapState(['userInfo']),
    hasCollection () {
      let _id = this.$route.query.id
      let hasCollection = false
      this.collectionList.forEach(item => {
        if (item._id === _id) hasCollection = true
      })
      return hasCollection
    }
  },
  mounted () {
    this.getDetail()
    if (this.userInfo._id) {
      this.listCollection()
    }
  },
  methods: {
    listCollection () {
      this.$http({
        method: 'post',
        url: `${this.$config.apiBase}/api/v0/movie/listCollection`,
        data: {
          _id: this.userInfo._id
        }
      }).then(res => {
        this.collectionList = res.data
      })
    },
    collection () {
      if (!this.userInfo.vip) {
        return this.$tools.popup({
          tpl: 'alert',
          title: '提示',
          content: `有驾照才能收藏电影哦`,
          buttons: ['取消', `<div class="tc-main">获取驾照</div>`],
          buttonCallBack: index => {
            if (index === 1) {
              this.$router.push('/vipGet')
            }
          }
        })
      }
      let type = this.hasCollection ? -1 : 1
      this.$http({
        method: 'post',
        url: `${this.$config.apiBase}/api/v0/movie/collection`,
        data: {
          _id: this.$route.query.id,
          uid: this.userInfo._id,
          type
        }
      }).then(res => {
        this.listCollection()
      })
    },
    getDetail () {
      let _id = this.$route.query.id
      this.$http({
        method: 'get',
        url: `${this.$config.apiBase}/api/v0/movie/detail`,
        data: {
          _id
        }
      }).then(res => {
        this.detail = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config.scss';
@import '../assets/css/mixins.scss';
.header{
  width:100%;
  height:.88rem;
  color:#FFF;
  font-size:.32rem;
  background-color:$themeColor;
  .title{
    max-width:6rem;
  }
}
.playerContainer{
  position: absolute !important;
  background-color:ivory;
  iframe{
    height:4.2rem;
    width:100%;
    background-color:#000;
    border:none !important;
  }
}
</style>
